<template>
	<view>
		<view style="width: 100%;height: 190upx;display: flex;align-items: center;background: #FFFFFF;">
			<image :src="detail.img" style="width: 120upx;height: 120upx;margin-left: 30upx;border-radius: 50%;" mode="aspectFill"></image>
			<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-left: 60upx;width: 480upx;">
				<!-- <span style="font-size: 40upx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;color: #000000;">60</span>
				<span style="font-size: 24upx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;color: #a9a9a9;">已帮助人数</span> -->
				<rich-text :nodes="detail.jieshao"></rich-text>
			</view>
			<!-- <view style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-left: 50upx;">
				<span style="font-size: 40upx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;color: #000000;">60</span>
				<span style="font-size: 24upx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;color: #a9a9a9;">好评人数</span>
			</view> -->
		</view>
		
		<view style="padding: 50upx 30upx;">
			<!-- <picker-view> -->
				<picker :range="pickList"   range-key="name" @change="Change" >
					<view class="picker" style="padding: 0upx 30upx;background: #FFFFFF;border-radius: 10upx;height: 60upx;line-height: 60upx;">
					      {{pickList[sel].name ? pickList[sel].name : '请选择'}}
					    </view>
				</picker>
			<!-- 	<picker>2</picker>
				<picker>3</picker>
			</picker-view> -->
			<!-- <input placeholder="请输入咨询标题" style="background-color: #FFFFFF;border-radius: 10upx;padding: 10upx;height: 80upx;line-height: 80upx;" /> -->
		</view>
		
		<view style="padding: 0upx 30upx;">
			<textarea v-model="textArea" placeholder="请输入咨询内容" style="background-color: #FFFFFF;border-radius: 10upx;padding: 10upx;height: 300upx;width: 100%;" />
		</view>
		
		<view style="padding: 30upx;">
			<view style="width: 100%;height: 88upx;background: #088fff;border-radius: 20upx;display: flex;align-items: center;justify-content: center;" @click="goZxSub()">
				<span style="font-size: 34upx;font-family: PingFang SC, PingFang SC-Bold;color: #ffffff;">立即咨询</span>
			</view>
			
			<view style="margin-top:30upx;width: 100%;height: 88upx;background: #ffffff;border-radius: 20upx;display: flex;align-items: center;justify-content: center;" @click="goDate()">
				<span style="font-size: 34upx;font-family: PingFang SC, PingFang SC-Bold;color: #088FFF;">预约咨询</span>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
			data() {
				return {
					id:'',
					catId:'',
					detail:{},
					pickList: [],
					sel: 0,
					textArea:''
				};
			},
			onLoad(options){
				this.id = options.id
				this.getConInfo(options.id);
				this.getCatId()
			},
			watch:{
				//显示空白页
				
			},
			methods: {
				//请求数据
				async getConInfo(id){
					var that = this;
					that.$zdapi.getConInfo({
						id: id
					}).then( res => {
						that.detail = res.data
					})
				},
				
				async getCatId(){
						var that = this;
						that.$zdapi.getCatId({
							
						}).then( res => {
							that.pickList = res.data
							that.catId = that.pickList[0].id
						})
				},
				
				Change(e){
					var that = this;
					that.sel = e.detail.value;
					that.catId = that.pickList[that.sel].id
				},
				
				goDate(){
					uni.navigateTo({
						url: '/pages/cart/cartDate?id=' + this.id + '&catId=' + this.catId
					})
				},
				
				goZxSub(){
					var that = this;
					if(!that.textArea){
						that.$api.msg('请输入咨询内容');
						 return;
					}
					
					that.$zdapi.getZxSub({
						id: that.id,
						uid: wx.getStorageSync('uid'),
						cat_id: that.catId,
						ans: that.textArea
					}).then(res => {
						that.$api.msg(res.msg); 
						setTimeout(function(){
							uni.navigateBack({
								
							});
						}, 1200)
					})
					
				}
			}
		}
	</script>

<style>
	page{
		background: #edeff2;
	}
</style>
